<template>
	<view id="walletBody">
		<view class="wallet">
			<head-navigation :back-is-show="1" :title="title" :txtColor="txtColor" :is-back="0" @getBarHight="getBarHight"
				:background-color="'#FFF'"></head-navigation>
			<view class="wallet_top">
				<view class="top_box" @click="jumpCoCo">
					<view class="tb_l">
						<image class="coco_wallet_img" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/4102029296394ba5aee80430ae3d727d.png" mode=""></image>
						<text>CoCo</text>
					</view>
					<view class="tb_r">
						<text>{{customer.coco}}</text>
					</view>
				</view>
				 <!-- <view class="top_table">
					<view class="dividend_coefficient">
						<text class="dc_l" :style="{'textAlign':(dividend.time!=='' && dividend.percentage !==''?'left':'center')}">分红系数</text>
						<view class="dc_r" v-if="dividend.time!=='' && dividend.percentage !==''">
							<text class="dc_time">{{dividend.time}}</text>
							<text class="dc_num">
								<text class="dc_num_01">分红系数：</text>
								<text class="dc_num_02">+{{dividend.percentage}}%</text>
							</text>
						</view>
					</view>
					<view class="top_echarts" v-if="showEcharts">
						<lineChart @pointInGrid='pointInGrid' ></lineChart>
					</view>
					<view class="top_footer_box">
						<view class="footer_but">
							<view class="fb_w">昨日收益(椰分)</view>
							<view class="fb_n">{{bonusInfo.customerYesterdayBonusMoney}}</view>
						</view>
						<view class="footer_but">
							<view class="fb_w">累计收益(椰分)</view>
							<view class="fb_n">{{bonusInfo.customerBonusMoneyCount}}</view>
						</view>
					</view>
				 </view> -->
				<view class="top_wealth top_yf">
					<view class="tw_l" @click="jumpYf">
						<image src="../../static/index/ass_yefen.png" mode=""></image>
						<text>椰分</text>
					</view>
					<view class="tw_r" @click="shenyeMarket">
						<view class="tw_r_n">{{customer.yf}}</view>
						<view class="tw_r_w">
							<text>去兑换</text>
							<uni-icons class="uniIcons" type="right" size="24rpx" color="#333333"></uni-icons>
						</view>
					</view>
				</view>
				<view class="top_wealth top_yf">
					<view class="tw_l" @click="jumpMedal">
						<image src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/b59ebdcfab9449689d4178c3f380d0e1.png" mode=""></image>
						<text>勋章</text>
					</view>
					<uni-icons type="right" size="26rpx" color="#333333"></uni-icons>
				</view>
			</view>
			<view class="yf_market">
				<view class="yf_market_title">椰分集市</view>
				<view class="product_list" v-if="marketList.length!=0">
					<view class="product_list_item" v-for="(item,index) in marketList" :key="index"
						@click="jumpMarketDetails(item)">
						<view class="list_item_img">
							<image class="img_bg" :src="item.img" mode="aspectFill"></image>
							<view class="sold_out" v-if="item.surplusStock == 0">已售罄</view>
						</view>
						<view class="list_item_title ellipseHide">{{item.name}}</view>
						<view class="list_item_coco">
							<block v-if="item.payType == 1">
								<image src="/static/newsImg/shenye_cion01.png" mode="" v-if="item.priceType == 1"></image>
								<image src="/static/newsImg/shenye_cion02.png" mode="" v-if="item.priceType == 2"></image>
								<text class="paytext_1">{{item.price}} {{item.priceTypeDict}} </text>
							</block>
							<block v-if="item.payType == 2">
								<text class="paytext_3">{{item.cash}}元</text>
							</block>
							<block v-if="item.payType == 3">
								<image src="/static/newsImg/shenye_cion01.png" mode="" v-if="item.priceType == 1"></image>
								<image src="/static/newsImg/shenye_cion02.png" mode="" v-if="item.priceType == 2"></image>
								<text class="paytext_1">{{item.price}} {{item.priceTypeDict}} </text><text
									class="paytext_2">+{{item.cash}}元</text>
							</block>
						</view>
						<view class="stock">库存：{{item.surplusStock}}</view>
					</view>
				</view>
				<block v-if="marketList.length==0">
					<view class="no_info" style="padding-top: 100rpx;padding-bottom: 100rpx;">
						<image src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/549d820f369043d5a6d6399f91ad8f89.png" mode="widthFix"></image>
						<text>暂无商品</text>
					</view>
				</block>
				<view class="more_info" v-if="moreInfo&&marketList.length!=0">到底啦~</view>
			</view>
			<!-- 获得积分弹窗 -->
			<uni-popup ref="popup" type="top" style="z-index:9999;" mask-background-color="rgba(0,0,0,0.8)"
				@maskClick="maskClick">
				<view class="popupBox">
					<view class="p_close"  @click="popupClose">
						<image src="/static/wallet/p_close.png" mode=""></image>
					</view>
					<view class="p_content">
						<view class="p_info">
							<!-- <image class="image" :src="mainImageUrl + '/static/wallet/p_coco.png'" mode=""></image> -->
							<view class="p_info_box">
								<view class="p_info_num">{{walleInfo.num}}</view>
								<view class="p_info_name">{{walleInfo.type}}</view>
							</view>
							
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 勋章弹窗 -->
			<uni-popup ref="popupMedal" style="z-index:9999;" mask-background-color="rgba(0,0,0,0.8)" @maskClick="maskClick">
				<view class="">
					<view class="popup_medal" >
						<uni-icons class="popup_medal_close" type="closeempty" size="26" color="#222222"
							@click="closePopupMedal"></uni-icons>
						<view class="popup_medal_txt">勋章正在升级中，请等待升级完成，</view>
						<view class="popup_medal_txt">感谢您的谅解。</view>
						<view class="popup_medal_button" @click="closePopupMedal">我知道了</view>
					</view>
					<view style="height: 140rpx;width: 100%;" @click="closePopupMedal"></view>
				</view>
			</uni-popup>
			<!-- <uni-popup ref="popupTwo" style="z-index:9999;" mask-background-color="rgba(0,0,0,0.8)">
				<view class="popupBoxTwo">
					<view class="p_title">什么是财富值？</view>
					<view class="p_subtitle">
						财富值是用户在神椰平台上的工作量、进行量化的一种方式，即工作证明。它是通过汇总您持有的积分、勋章等资产价值来计算得出的。随着您积极参与平台的任务及活动和持有神椰数字资产的累计，您的财富值将逐步提升。而随着财富值的增加，您将获得更多的平台权益和服务，让您在神椰平台上享受更多福利和特权。
					</view>
					<view class="p_but" @click="closeTips"></view>
				</view>
			</uni-popup> -->
			<!-- 自定义tabBar -->
		</view>
	</view>
</template>

<script>
	import {
		getCommodityList
	} from '@/api/api-v1-2.js'
	import {
		wealthInfo,
		mineCocoBonusInfo,
		equityManagerEquityCardV2,
	} from '@/api/wallet.js'
	const app = getApp()
	import handleTime from '@/mixins/handleTime'
	export default {
		mixins: [handleTime],
		data() {
			return {
				mainImageUrl: this.mainImageUrl,
				txtColor: '#333',
				title: '钱包',
				logoStatus: false,
				indexId: 1,
				navList: [{
						id: 1,
						name: '快速打卡'
					},
					{
						id: 2,
						name: '神力勋章'
					},
				],
				customer: {},
				medalInfo: {}, //勋章信息
				activityList: [], //打卡活动列表
				listTotal: 0, //总数
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				list: [], ///权益卡列表
				equityNum: 0, //权益数量
				isShow: false,
				isFixed: false, //是否上划吸顶
				scrollTop: 0, //滑动距离
				updateStatus: false,
				bonusInfo: {}, //分红信息
				// 财富值
				walleInfo: {
					num: 0,
					type: 'CoCo',
				},
				current: 0, //轮播切换下标
				walletYF: 0, //椰分数
				walletCoCo: 0, //coco数
				myScroll: 0, //打卡神力勋章 top高度
				qrcodeInfo: {},
				heightVeiw: '',
				medalCardList:[],//勋章列表
				dividend:{
					time:'',
					percentage:''
				},
				systemHeight:0, //系统高度
				myScrollHeight:0, //nav 高度
				showEcharts:true, //显示表格
				moreInfo: false,
				marketList: [],//集市列表
			}
		},
		
		onLoad(e) {
			
		},
		onShow() {
			this.logoStatus = app.checkLogin()
			this.getWealthInfo()
			this.init()
		},
		methods: {
			//初始化列表
			init() {
				this.pageNum = 1
				this.marketList = []
				//滚动到页面的目标位置
				 uni.pageScrollTo({
					 scrollTop: 0,
					  duration: 0
				 });
				this.getMarketList()
			},
			//集市详情跳转
			jumpMarketDetails(el){
				uni.navigateTo({
					url:'/pages/subPackages/pagesB/shenyeMarket/commodityDetails/commodityDetails?id='+el.id
				})
			},
			// 获取集市列表
			async getMarketList(){
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				try {
					const res = await getCommodityList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records
					if (this.pageNum > 1) {
						this.marketList = this.marketList.concat(el); //将数据拼接在一起
					} else {
						this.marketList = el
					}
					
					if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
						this.moreInfo = true
						// console.log('没有分页')
					} else {
						this.moreInfo = false
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			//勋章跳转
			jumpMedal() {
				this.showEcharts = false
				this.$refs.popupMedal.open()
			},
			//关闭勋章提示弹窗
			closePopupMedal() {
				this.showEcharts = true
				this.$refs.popupMedal.close()
			},
			timeConversion(dateData) {
				var date = new Date(dateData.replace(/-/g, '/'))
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? ('0' + m) : m
				var d = date.getDate()
				d = d < 10 ? ('0' + d) : d
				var time = y + '/' + m + '/' + d;
				// this.ruleForm.duedate=time;
				return time
			},
			pointInGrid(e){
				this.dividend.time = this.timeConversion(e.bonusTime)
				this.dividend.percentage = e.coefficient
				// console.log(e)
			},
			getBarHight(e){
				console.log('heightVeiw',e)
				this.heightVeiw = e
			},
			// 椰分跳转
			jumpYf() {
				this.clearIntervalOff()
				uni.navigateTo({
					url: '/pages/subPackages/pagesB/shenyeCoin/shenyeYefen'
				})
			},
			// coco跳转
			jumpCoCo() {
				this.clearIntervalOff()
				uni.navigateTo({
					url: '/pages/subPackages/pagesB/shenyeCoin/shenyeCoco'
				})
			},
			// 神椰集市跳转
			shenyeMarket() {
				this.clearIntervalOff()
				uni.navigateTo({
					url: '/pages/subPackages/pagesB/shenyeMarket/shenyeMarket'
				})
			},
			// 获取钱包信息
			async getWealthInfo() {
				var res = await wealthInfo()
				this.customer = res.result
				if (app.isEmpty(this.$queue.getData('walletCoCo'))) {
					this.$queue.setData('walletCoCo', this.customer.coco)
				} else {
					this.walletCoCo = this.$queue.getData('walletCoCo')
				}

				if (app.isEmpty(this.$queue.getData('walletYF'))) {
					this.$queue.setData('walletYF', this.customer.yf)
				} else {
					this.walletYF = this.$queue.getData('walletYF')
				}
				this.pop() //弹窗效验数据是否变化
				// 获取财富值
				var vo = await mineCocoBonusInfo()
				this.bonusInfo = vo.result
			},
			// 表格
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)

				lineChart.setOption(lineOption)
				return lineChart
			},
			popupClose() {
				this.showEcharts = true
				this.$refs.popup.close()
				setTimeout(()=>{
					this.pop()
				},500)
			},
			// 触发遮罩层
			maskClick() {
				this.showEcharts = true
				setTimeout(()=>{
					this.pop()
				},500)
			},
			// 打开财富值
			openPopupTwo() {
				this.$refs.popupTwo.open()
			},
			// 关闭弹窗
			closeTips() {
				this.$refs.popupTwo.close()
			},
			//弹窗效验数据是否变化
			pop() {
				let num = 0
				if (this.customer.coco > 0) {
					num = Number((this.customer.coco - this.walletCoCo).toFixed(2))
					this.$queue.setData('walletCoCo', this.customer.coco)
					console.log('this.walleInfo.num',num)
					if (num > 0) {
						this.walleInfo.num = num
						this.walletCoCo = this.customer.coco
						this.walleInfo.type = 'CoCo'
						this.$refs.popup.open()
						this.showEcharts = false
						return
					}
				}
				if (this.customer.yf > 0) {
					num = Number((this.customer.yf - this.walletYF).toFixed(2))
					this.$queue.setData('walletYF', this.customer.yf)
					if (num > 0) {
						this.walleInfo.num = num
						this.walleInfo.type = '椰分'
						this.walletYF = this.customer.yf
						this.$refs.popup.open()
						this.showEcharts = false
					}
				}
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				this.moreInfo = true
				console.log('没有分页')
			} else {
				this.moreInfo = false
				this.pageNum++; //每触底一次 page + 1;
				this.getMarketList()
			}
		}
	}
</script>

<style scoped>
	view {
		box-sizing: border-box;
	}
	#walletBody{
		background: #F9FAFF;
		min-height: 100vh;
	}
	.wallet {
		width: 100%;
		min-height: 100vh;
		background: url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/81dba2e60dec4650832dcc185370cb55.jpg') no-repeat;
		background-size: 100% 570rpx;
		background-position: top left;
		padding-top: 30rpx;
	}

	/* 头部 Star */
	.wallet_top {
		width: 690rpx;
		padding: 18rpx 20rpx;
		border-radius: 50rpx;
		background: #ffffff;
		margin: 0 auto;
	}
	
	.top_box {
		width: 100%;
		background: linear-gradient(248deg, #FF6A80 9.12%, #FF5956 75.89%, #FF2622 126.95%);
		padding:0 30rpx;
		height: 190rpx;
		box-sizing: border-box;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tb_l {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	
	.coco_wallet_img {
		width: 107rpx;
		height: 105rpx;
		margin-right: 12rpx;
		margin-top: 20rpx;
	}
	
	.tb_l_one {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.tb_l_one text {
		color: #BCC6FF;
		font-size: 28rpx;
		margin-right: 6rpx;
	}
	
	.tb_l_num {
		font-size: 56rpx;
		line-height: 78rpx;
		color: #ffffff;
	}
	
	.tb_r {
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		position: relative;
		font-size: 56rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	.tb_r .status_medal_img {
		width: 194rpx;
		height: 156rpx;
	}
	
	.tb_r .medal_txt {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 36rpx;
		bottom: 34rpx;
	}
	
	.medal_txt .medal_txt_box {
		line-height: 36rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-weight: bold;
		height: 36rpx;
		background: linear-gradient(90deg, #AA3FFF 8.09%, #5A4DF5 82.35%);
		max-width: 192rpx;
	}
	
	.medal_txt .medal_txt_l {
		width: 30rpx;
		height: 36rpx;
	}
	
	.medal_txt .medal_txt_r {
		width: 30rpx;
		height: 36rpx;
		margin-left: -2rpx;
	}
	
	.top_table {
		width: 100%;
		padding: 10rpx 24rpx;
		background: #FDF7F7;
		border-radius: 16rpx;
		margin-top: 32rpx;
	}
	
	/* coco 收益 */
	.top_wealth {
		display: flex;
		flex-direction: row;
		align-items: center;
		/* justify-content: space-between; */
	}
	
	.tw_l {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
	}
	
	.tw_l image {
		width: 56rpx;
		height: 56rpx;
	}
	
	.tw_l text {
		font-size: 30rpx;
		font-weight: 400;
		line-height: 42rpx;
		margin-left: 22rpx;
		color: #222222;
	}
	
	.tw_r_n {
		text-align: end;
		padding-right: 6rpx;
		font-size: 36rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: #222222;
	}
	
	.tw_r_n {
		text-align: end;
		padding-right: 6rpx;
		font-size: 36rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: #222222;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tw_r_w .uniIcons{
		margin-top: 4rpx;
	}
	/* 头部 end */
	/* top_echarts Star */
	.top_echarts {
		width: 100%;
		height: 408rpx;
		background: #ffffff;
		margin-top: 20rpx;
	}
	
	/* top_echarts end */
	
	/* 收益按钮 显示 Star*/
	.top_footer_box {
		margin-top: 30rpx;
		margin-bottom: 64rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.footer_but {
		width: 280rpx;
		height: 112rpx;
		border-radius: 24rpx;
		background: #FF7C7C;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}
	
	.fb_w {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
	}
	
	.fb_n {
		font-size: 32rpx;
		font-weight: 700;
		line-height: 38rpx;
	}
	
	/* 收益按钮 显示 end */
	/* 椰分 Star*/
	.top_yf {
		margin-top: 30rpx;
		background: #FDF7F7;
		border-radius: 16rpx;
		padding: 20rpx 22rpx;
	
	}
	
	.top_yf .tw_r {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding-left: 20rpx;
	}
	
	.top_yf .tw_r .tw_r_w {
		color: #333333;
		font-size:24rpx;
	}
	
	/* 椰分 end */
	
	/* 打卡 神力勋章 Star*/
	.wealth_info_box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 136rpx;
	}
	
	.wealth_info {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		font-size: 34rpx;
		box-sizing: border-box;
		padding: 0 60rpx;
		/* margin-top: 60rpx; */
	}
	
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
		height: 90rpx;
		background: #fff;
		box-shadow: 0rpx 8rpx 12rpx 0rpx #DDDDDD;
	}
	
	.wealth_info_nav {
		display: flex;
		flex-direction: row;
	}
	
	.wi_item {
		min-width: 98rpx;
		height: 45rpx;
		box-sizing: border-box;
		color: #666666;
		position: relative;
	}
	
	.wi_item:first-child {
		margin-right: 110rpx;
	}
	
	.on {
		font-weight: bold;
		color: #222222;
	}
	
	.on:after {
		position: absolute;
		left: 0;
		bottom: 0;
		content: "";
		display: block;
		width: 98rpx;
		height: 12rpx;
		background: linear-gradient(90deg, #4738FA 1.35%, rgba(71, 56, 250, 0) 99.32%) no-repeat;
	}
	
	/* 打卡 神力勋章 end */
	/* 打卡计划  Star*/
	.clock_in_title {
		padding-left: 40rpx;
		font-size: 30rpx;
		color: #222222;
		font-weight: bold;
	}
	
	/* 打卡计划 end */
	/* 内容 Star*/
	.main {
		margin-top: 30rpx;
	}
	
	/* 轮播 Star*/
	.main_swiper {
		width: 690rpx;
		height: 614rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}
	
	.main_swiper /deep/ .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		background: #C1C1C1;
		opacity: .5;
		margin-right: 6rpx;
	}
	
	.main_swiper /deep/ .uni-swiper-dot-active {
		width: 24rpx;
		height: 8rpx;
		background: #9E9E9E;
		border-radius: 40rpx;
	}
	
	.main_swiper_item {
		width: 100%;
		height: 536rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	
	.m_s_img {
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		filter: blur(40rpx);
	}
	
	.m_s_img image {
		width: 100%;
		height: 100%;
	}
	
	.m_s_c {
		position: absolute;
		padding: 10rpx 10rpx 0 10rpx;
		z-index: 3;
		width: 100%;
		/* height: 100%; */
	}
	
	.ms_img {
		width: 100%;
		height: 340rpx;
		position: relative;
	}
	
	.ms_img image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	
	.ms_img .ms_b {
		position: absolute;
		border-radius: 200rpx;
		padding: 6rpx 16rpx;
		background: rgba(0, 0, 0, 0.6);
		font-size: 22rpx;
		color: #ffffff;
		top: 10rpx;
		left: 10rpx;
	}
	
	.ms_title {
		padding: 0 26rpx;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #fff;
		margin-top: 16rpx;
	}
	
	.ms_fotter {
		display: flex;
		flex-direction: row;
		padding: 0 10rpx 0 26rpx;
		margin-top: 26rpx;
		margin-bottom: 24rpx;
	}
	
	.ms_left {
		flex: 1;
		color: #FFFFFF;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.ms_l_item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.ms_l_item_f {
		margin-right: 40rpx;
	}
	
	.ms_l_item image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}
	
	.ms_right {
		border-radius: 200rpx;
		padding: 6rpx 16rpx;
		background: rgba(255, 255, 255, 0.7);
		font-size: 22rpx;
		color: #222222;
		font-size: 22rpx;
	}
	
	/* 轮播 end*/
	/* 内容 end*/
	
	/* 当前权益 Star */
	.equity_list {
		margin-top: 30rpx;
	}
	
	.equity_list_item {
		width: 638rpx;
		background: #fff;
		border-radius: 12rpx;
		margin: 0 auto;
		position: relative;
		margin-bottom: 30rpx;
	}
	
	.wen_h_i {
		width: 638rpx;
		height: 314rpx;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
	}
	
	.wen_h_i_01 {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		/* filter: blur(40rpx); */
	}
	
	/* 	.wen_h_i_02 {
	    height: 100%;
	    width: 100%;
	    position: absolute;
	    z-index: 2;
	    left: 50%;
	    top: 0;
	    transform: translateX(-50%);
	} */
	.equity_num {
		position: absolute;
		top: 20rpx;
		right: 0;
		z-index: 3;
		width: fit-content;
		align-self: baseline;
		padding: 4rpx 18rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		background: rgba(0, 0, 0, .3);
		border-radius: 200rpx 0rpx 0rpx 200rpx;
	}
	
	.equity_info {
		margin-top: 24rpx;
	}
	
	.equity_info_title_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding: 0 24rpx 24rpx 24rpx;
		box-sizing: border-box;
	}
	
	.equity_info_title {
		font-size: 30rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: #222222;
		flex: 1;
		width: 0;
	}
	
	.equity_info_clock_in {
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}
	
	.equity_info_clock_in text {
		margin-right: 6rpx;
	}
	
	.ewm {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}
	
	.qr_code {
		padding-top: 6rpx;
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #222222;
		font-size: 28rpx;
	}
	
	.qr_code_img {
		width: 250rpx;
		height: 250rpx;
		/* background: #C1C1C1; */
		margin-bottom: 16rpx;
	}
	
	.qr_code_img image {
		width: 100%;
		height: 100%;
	}
	
	/* 当前权益 end */
	/* 加载中 Star*/
	.main_more {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0 200rpx 0;
		color: #4738FA;
		font-size: 28rpx;
	}
	
	/* 加载中 end */
	/* 暂无可用权益 Star */
	.no_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
	}
	
	.no_box image {
		width: 360rpx;
		height: 180rpx;
	}
	
	.no_box text {
		font-size: 28rpx;
		color: #999999;
	}
	
	/* 暂无可用权益 end */
	/* 勋章列表 Star */
	.nav_main_three {}
	
	.nav_main_t,
	.income_additional {
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	
	.nav_main_t_l {
		font-size: 30rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: #222222;
	}
	
	.income_additional {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #FF3A3A;
	}
	
	.medal_ls {
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
	
	.medal_list_scroll-view {
		width: 100%;
		height: 280rpx;
	}
	
	.medal_list_scroll-view /deep/ .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		background: #C1C1C1;
		opacity: .5;
		margin-right: 6rpx;
	}
	
	.medal_list_scroll-view /deep/ .uni-swiper-dot-active {
		width: 24rpx;
		height: 8rpx;
		background: #9E9E9E;
		border-radius: 40rpx;
	}
	
	.medal_list {
		white-space: nowrap
	}
	
	.medal_list_box {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% / 3);
		position: relative;
	}
	
	.medal_list_box_num {
		height: 32rpx;
		border-radius: 100rpx;
		background-color: rgba(0, 0, 0, 0.6);
		color: #FFFFFF;
		font-size: 22rpx;
		padding: 0 12rpx;
		line-height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}
	
	.medal_list_box image {
		width: 140rpx;
		height: 140rpx;
		margin-bottom: 12rpx;
	}
	
	.medal_list_box_txt1 {
		color: #222222;
		font-size: 26rpx;
		width: 100%;
		text-align: center;
	}
	
	.medal_list_box_txt2 {
		color: #FF3A3A;
		font-size: 24rpx;
	}
	
	/* 没有数据 */
	.wallet_no {
		margin-top: 32rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.wallet_no_img {
		width: 360rpx;
		/* height: 110rpx; */
	}
	
	.wallet_no_img image {
		width: 100%;
		height: 100%;
	}
	
	.wallet_info {
		color: #999999;
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 20rpx;
	}
	
	/* end */
	/* 勋章列表 end */
	/* 弹窗 Star */
	.popupBox {
		padding-top: 272rpx;
	}
	
	.popupBox .p_close {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding-right: 40rpx;
		box-sizing: border-box;
	}
	
	.popupBox .p_close image {
		width: 56rpx;
		height: 56rpx;
	}
	
	.popupBox .p_content {
		width: 750rpx;
		height: 642rpx;
		background: url('https://test.coco.milianmeng.net/resource/static/wallet/p_coco.png') no-repeat;
		background-size: 100% 100%;
		margin-bottom: 100rpx;
		display: flex;
		justify-content: center;
	}
	
	.popupBox .p_info {
		width: 390rpx;
		height: 390rpx;
		/* background: #2794E5; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 92rpx;
	}
	
	.popupBox .p_info_num {
		color: #FF3027;
		font-size: 96rpx;
		font-weight: 700;
		line-height: 112rpx;
		text-align: center;
	}
	
	.popupBox .p_info_name {
		font-size: 40rpx;
		font-weight: 400;
		line-height: 56rpx;
		color: #ffffff;
		text-align: center;
	}
	
	/* 弹窗 end */
	/* 弹窗信息 */
	.popupBoxTwo {
		width: 650rpx;
		background: #fff url('https://test.coco.milianmeng.net/resource/static/newsImg/my_number_bg.jpg') no-repeat;
		background-size: 100% auto;
		border-radius: 20rpx;
		padding-bottom: 50rpx;
	}
	
	.popupBoxTwo .p_title {
		font-size: 40rpx;
		color: #222222;
		width: 100%;
		padding-top: 50rpx;
		padding-bottom: 40rpx;
		text-align: center;
		font-weight: 600;
	}
	
	.popupBoxTwo .p_subtitle {
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		line-height: 48rpx;
		color: #222222;
		text-align: justify;
	}
	
	.popupBoxTwo .p_content {
		display: flex;
		width: 100%;
		padding: 0 48rpx;
		color: #CF2B2B;
		font-size: 28rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	
	.popupBoxTwo .p_content image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 16rpx;
		margin-top: 5rpx;
	}
	
	.popupBoxTwo .p_content text {
		flex: 1;
	}
	
	.popupBoxTwo .p_but {
		width: 200rpx;
		height: 72rpx;
		background: url('https://test.coco.milianmeng.net/resource/static/index/paradise/but.png') no-repeat;
		background-size: 100% 100%;
		margin: 60rpx auto 0 auto;
		/* margin-top: 66rpx; */
	}
	
	/* end */
	
	.dividend_coefficient {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10rpx;
	}
	
	.dc_l {
		font-size: 28rpx;
		color: #222222;
		flex: 1;
	}
	
	.dc_r {
		width: 454rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		/* background: #F9E9E9; */
		color: #886565;
		font-size: 22rpx;
		padding: 4rpx 20rpx;
		border-radius: 8rpx;
	}
	
	.dc_time {
		color: #666666;
		margin-right: 22rpx;
	}
	
	.dc_num {
		font-size: 24rpx;
	}
	
	.dc_num_01 {
		color: #832B2B;
	}
	
	.dc_num_02 {
		color: #FF3A3A;
	}
	
	/* 勋章弹窗 */
	.popup_medal {
		width: 650rpx;
		height: 416rpx;
		border-radius: 32rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		background: linear-gradient(180deg, #FFC8CB -8.96%, #FFF 22.19%, #FFF 60.58%, #FFF 99.84%);
		padding: 110rpx 0rpx 0;
		box-sizing: border-box;
		position: relative;
	}
	
	.popup_medal_close {
		top: 20rpx;
		right: 20rpx;
		position: absolute;
	}
	
	.popup_medal_txt {
		font-size: 32rpx;
		color: #222222;
		margin-bottom: 26rpx;
	}
	
	.popup_medal_button {
		width: 242rpx;
		height: 84rpx;
		border-radius: 8rpx;
		color: #FF2521;
		margin-top: 30rpx;
		border: 2rpx solid #FF2521;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
	}
	
	/* end */
	/* 椰分集市 */
	.yf_market {
		border-radius: 32rpx;
		background-color: #FDF7F7;
		padding: 30rpx;
		margin: 30rpx auto 0;
		width: 690rpx;
	}
	.product_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		padding: 32rpx 0rpx 0;
		box-sizing: border-box;
	
	}
	
	.product_list_item {
		/* break-inside: avoid-column; */
		width: 300rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		/* display: inline-block; */
	}
	
	.list_item_img {
		position: relative;
		width: 100%;
		height: 262rpx;
		overflow: hidden;
		border-radius: 12rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.img_bg {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
	
	.sold_out {
		position: absolute;
		z-index: 2;
		width: 142rpx;
		height: 142rpx;
		border-radius: 50%;
		line-height: 142rpx;
		text-align: center;
		color: #ffffff;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.list_item_title {
		width: 100%;
		font-size: 30rpx;
		line-height: 44rpx;
		color: #222222;
		margin-bottom: 8rpx;
	}
	
	.list_item_coco {
		color: #FF1919;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.list_item_coco image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}
	
	.list_item_coco .paytext_1 {
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.list_item_coco .paytext_2 {
		font-size: 24rpx;
	}
	
	.stock {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #666666;
	}
	
	/* footer */
	.shenye_footer {
		position: fixed;
		bottom: 0;
		z-index: 10;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: #ffffff;
		width: 100%;
		height: 148rpx;
	}
	
	.footer_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #4D4D4D;
		text-align: center;
		margin-top: 20rpx;
	}
	
	.footer_item:first-child {
		margin-right: 236rpx;
	}
	
	.footer_item image {
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 10rpx;
	}
	.more_info{
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		width: 100%;
		padding: 20rpx 0 60rpx;
	}
	.no_info {
		padding-top: 110rpx;
	}
	
	.no_info image {
		width: 352rpx;
	}
	
	.no_info text {
		color: #B2B2B4;
		font-size: 28rpx;
		margin-top: -38rpx;
	}
</style>